<template>
	<view>
		<map class="map" :latitude="location.latitude" :longitude="location.longitude" :markers="covers" :scale="20">
		</map>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js';
	let qqmapsdk; // 全局保存地图核心对象
	const location = ref({
		latitude: 39.909,
		longitude: 116.39742
	})

	const covers = computed(() => {
		return [{
			id: 1,
			latitude: location.value.latitude,
			longitude: location.value.longitude,
			iconPath: '/static/home_selected.png',
			width: 30,
			height: 30
		}]
	})

	onLoad(() => {
		initQQMap();
		onMapSearch();
		getUserLocation();
	});

	
	const initQQMap = () => {
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: 'OQOBZ-PEBO7-VN7XM-PT4HK-KF4MS-RHBZR'
			});
		}
	
	const onMapSearch = () => {
			qqmapsdk.search({
				keyword: '蜜雪冰城', //搜索关键词
				success: res => {
					console.log(res);
				}
			})
		}


	const getUserLocation = () => {
		qqmapsdk.search({
			keyword: 'kfc', //搜索关键词
			success: res => {
				console.log(res);
			}
		})
		// uni.getLocation({
		// 	type: 'gcj02',
		// 	success(res) {
		// 		location.value.longitude = res.longitude;
		// 		location.value.latitude = res.latitude;
		// 	},
		// 	fail(err) {
		// 		console.log(err);
		// 	}
		// });
	}
	
	
	// const covers = ref([{
	// 	id: 1,
	// 	latitude: 39.909,
	// 	longitude: 116.39742,
	// 	iconPath: '/static/home_selected.png',
	// 	width: 20,
	// 	height: 20
	// }, {
	// 	id: 2,
	// 	latitude: 39.90,
	// 	longitude: 116.39,
	// 	iconPath: '/static/home_selected.png',
	// 	width: 20,
	// 	height: 20
	// }])
</script>

<style scoped lang="scss">
	.map {
		width: 100%;
		height: 100vh;
	}
</style>